<!--管理员承训专业任务-->
<template>
  <div class="assessment-container">
    <div class="plan-entry-table-container">
      <div style="text-align:left;margin:0 0 15px 0;">
      <!-- <el-button type="warning" icon="el-icon-circle-plus-outline" @click="xzpycc">新增培养层次</el-button> -->
        <div
          class="cjrc-button"
          @click="xzpycc"
        >
          <img src="@/assets/assessment/iconaddd.png" alt="" />
          <span style="margin-left: 10px;">新增培养层次</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        :summary-method="getSummaries"
        show-summary
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="school" label="承担院区" align="center">
        </el-table-column>
        <el-table-column prop="dictValue" label="培养层次" align="center">
          <template slot-scope="scope">
              <div class="bk-lucj-import-button" style="display:inline-block;" >
              <span>{{ scope.row.dictValue }}</span>
                <img
                  @click="bj(scope.row)" 
                  v-if="scope.row.shuliang === 0"
                  src="../../../assets/assessment/icon-plan-record-detail.png"
                  alt=""
                  style="margin-left: 10px"
                />
              </div>
          </template>
        </el-table-column>

        <el-table-column prop="shuliang" label="专业数量" align="center">
          <template slot-scope="scope">

              <div class="bk-lucj-import-button" @click="bj2(scope.row)" style="display:inline-block;">
              <span >{{ scope.row.shuliang }}</span>
                <img
                  src="../../../assets/assessment/icon-plan-record-detail.png"
                  alt=""
                  style="margin-left: 10px"
                />
              </div>
          </template>
        </el-table-column>
           <el-table-column prop="cz" label="操作" align="center">
          <template slot-scope="scope">
             <!-- <el-button type="danger" @click="delCol(scope.row.id)"  v-if="scope.row.shuliang == 0">删除</el-button> -->
             <div
              class="plsc-button"
              v-if="scope.row.shuliang === 0"
              @click="delCol(scope.row.id)"
              style="width: 90px;margin:0 auto"
            >
              <span>删 除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="新增培养层次"
      :visible.sync="showManualEntryDialog"
      width="40%" custom-class="ManualEntryDialog"
    >
      <div class="assessment-edit-plan-container">
        <div class="my-form-container">
          <!-- <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">承担院区</div>
              <div class="my-form-item-value">洛阳院区</div>
            </el-col>
          </el-row> -->
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">培养层次</div>
              <div class="my-form-item-value"><el-input v-model="pycc" placeholder="请输入培养层次"></el-input></div>
            </el-col>
          </el-row>
        </div>
        <div
          slot="footer" style="text-align:center;margin-top:30px"
        >
        <div class="button-group">
          <div @click="pjByIdGuidesave">
            <div>保 存</div>
          </div>
          <div @click="pjByIdGuidex">
            <div>取 消</div>
          </div>
        </div>
        <!-- <el-button @click="pjByIdGuidesave" type="success">保 存</el-button>
        <el-button @click="pjByIdGuidex" type="danger" style="margin-left:60px">取 消</el-button> -->
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑培养层次"
      :visible.sync="showManualEntryDialog1"
      width="40%"
      custom-class="ManualEntryDialog"
    >
      <div class="assessment-edit-plan-container">
        <div class="my-form-container">
          <!-- <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">承担院区</div>
              <div class="my-form-item-value">洛阳院区</div>
            </el-col>
          </el-row> -->
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">培养层次</div>
              <div class="my-form-item-value"><el-input v-model="input1" placeholder="请输入培养层次"></el-input></div>
            </el-col>
          </el-row>
        </div>
        <div
          slot="footer" style="text-align:center;margin-top:30px"
        >
          <div class="button-group">
            <div @click="bjpyccsave">
              <div>保 存</div>
            </div>
            <div @click="showManualEntryDialog1 = false">
              <div>取 消</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑专业数量"
      :visible.sync="showManualEntryDialog3"
      width="40%"
      custom-class="ManualEntryDialog"
    >
      <div class="assessment-edit-plan-container">
        <div class="my-form-container">
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">承担院区</div>
              <div class="my-form-item-value">洛阳院区</div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">专业数量</div>
              <div class="my-form-item-value"><el-input v-model="input2" placeholder="请输入"></el-input></div>
            </el-col>
          </el-row>
        </div>
        <div
          slot="footer" style="text-align:center;"
        >
          <div class="button-group">
            <div @click="zyslsave">
              <div>保 存</div>
            </div>
            <div @click="zyslsc">
              <div>取 消</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="showManualEntryDialog2"
      width="1185px"
      class="manual-entry-container"
    >
      <div
        style="
          width: 350px;
          margin: 0 auto;
          line-height: 200px;
          color: #004ca7;
          font-size: 18px;
        "
      >
        本科中，还有10个专业，确认要删除么？
      </div>
      <div>
        <span
          slot="footer"
          class="dialog-footer"
          style="width: 200px; margin: 0 auto; display: block"
        >
          <button
            @click="pjByIdGuide"
            style="
              width: 90px;
              height: 30px;
              border: 1px solid #f3b815;
              border-radius: 6px;
              color: #f3b815;
            "
          >
            保存
          </button>
          <button
            @click="pjByIdGuide"
            style="
              margin-left: 20px;
              width: 90px;
              height: 30px;
              border: 1px solid #ff3819;
              border-radius: 6px;
              color: #ff3819;
            "
          >
            删除
          </button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getlist, xzpyccsave,scpycc,updatedPycc,setPycc,delRemove } from "@/api/professional/details";
export default {
  data() {
    return {
      pycc: "",
      input1: "",
      input2: "",
      showManualEntryDialog: false,
      showManualEntryDialog1: false,
      showManualEntryDialog2: false,
      showManualEntryDialog3: false,
      studentid: "",
      planid: "",
      xueqi: "",
      rowindex:"",
      tableData: [],
      coursename: "",
    };
  },
  computed: {
    config() {
      return {
        mergeTarget: "school", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性
          "school",

        ],
      };
    },
  },
  created() {

    this.getlist();

  },
  methods: {
    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
     isEmpty(val) {
      return typeof val == "undefined" || val === null || val == "-";
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === "[object Object]";
    },
    mergeRow() {
      let arr = [].concat(this.tableData);
      // arr.splice(index, 0, Object.assign({}, row))

      this.tableData = this.mergeData(arr);
    },
    mergeData(list) {
      // mergeTarge - 合并项依据
      // combineProp - 根据mergeTarge 进行合并的单元格属性
      return this.filterData(this.config, [].concat(list));
    },
    filterData(config, tableData, targetProp) {
      const { mergeTarget, combineProp } = config;
      // 叠加的合并条件
      combineProp.forEach((column) => {
        // 记录合并项
        let combineCount = 1;
        if (this.isObject(column)) {
          return this.filterData.call(this, column, tableData, mergeTarget);
        }
        // 使用倒序遍历
        for (let i = tableData.length - 1; i >= 0; i--) {
          let curr = tableData[i],
            prev = tableData[i - 1];

          if (this.isEmpty(prev)) {
            // 已经循环完毕
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            break;
          }

          if (
            prev[targetProp] === curr[targetProp] &&
            prev[mergeTarget] === curr[mergeTarget] &&
            prev[`${column}`] === curr[`${column}`]
          ) {
            ++combineCount;
            curr[`${column}-span`] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            prev[`${column}-span`] = {
              rowspan: 1,
              colspan: 1,
            };
            // 前后项不相符时，对combinecount进行重置
            combineCount = 1;
          }
        }
      });
      return tableData;
    },
    delCol(ids){
      this.$confirm('确认要删除吗？')
        .then(_ => {
        delRemove(ids).then((res) => {
          if(res.data.code == 200){
            this.$message({ type: "success", message: '删除成功！' });
            this.getlist();
          } else {
            this.$message({ type: "error", message: res.data.data, duration:5000 });
          }
        });
      })
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {

          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
    getlist() {
      return new Promise(() => {
        getlist().then((res) => {
          // this.tableData = res.data.data[0].dictVOS;
          this.tableData = [];
          let tmpTableData = [];
          for (const dictVoItem of res.data.data) {
            for (const pyccItem of dictVoItem.dictVOS) {
              tmpTableData.push(pyccItem)
            }
          }
          this.tableData = tmpTableData;
          this.mergeRow();
        });
      });
    },
    //表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }

    },
    //保存新增培养层次
    pjByIdGuidesave() {
      console.log(this.pycc,"sssssssssssssss11111111")
       let obj = {
        dictKey: this.pycc,
        dictValue: this.pycc,
        sort: this.tableData.length+1,
      };
       return new Promise(() => {
        setPycc(obj).then(res => {
          if(res.data.code == 200) {
            this.$message({ type: "success", message: "保存成功！" });
            this.showManualEntryDialog = false;
            this.getlist();
          }
        });
      });
      // console.log(777);
      // let obj = {
      //   code: this.tableData[0].code,
      //   dictKey: this.pycc,
      //   dictValue: this.pycc,
      //   isSealed: 0,
      //   parentId: this.tableData[0].parentid,
      //   remark: "",
      //   sort: this.tableData.length,
      // };
      // xzpyccsave(obj).then((res) => {
      //   // this.tableData = res.data.data;
      //   console.log(res.data.data, "res.data.data");
      // });
      // this.showManualEntryDialog = false;
    },
    pjByIdGuidex() {

      this.showManualEntryDialog = false;
    },
    pjByIdGuide() {},
    //新增培养层次
    xzpycc() {
      this.pycc=""
      this.showManualEntryDialog = true;
    },
    //添加专业
    tjzy() {
      // this.showManualEntryDialog2 = true;
      this.$router.push("/admin/professional/specialtysr");
    },
    bj(index) {
      console.log(index,"1111111111111112")
      this.showManualEntryDialog1 = true;
      this.rowindex = index;
      this.input1 = index.dictValue
    },
    bjpyccsave() {
      let obj = {
        id: this.rowindex.id,
      //  dictKey: this.input1,
        dictValue: this.input1
      };
      return new Promise(() => {
        updatedPycc(obj).then(res => {
          this.showManualEntryDialog1 = false;
          this.getlist();
        });
      });


    },
    bj2(index) {
      console.log(index,"0005")
          this.$router.push({path:"/admin/professional/details" ,query: {rowindex:index}});

      // this.showManualEntryDialog3 = true;
      // this.rowindex = index;
      // console.log(index,"111111111111111111111111111111111111")
      // this.input2 = index.shuliang
    },
    // zysl(index){
    //   console.log(index,8989)
    //   this.$router.push({path:"/admin/professional/details" ,query: {undertakeCollege: this.tableData[index].school,trainingLevel:this.tableData[index].level}});
    // },
    bjpyccsc() {
      if (this.tableData[this.index].num == 0) {
        let obj={
          ids:this.tableData[this.index].id
        }
        scpycc(obj).then((res) => {});
        this.showManualEntryDialog3 = false;
        this.tableData = res.data.data;
      }
    },

    zyslsave() {
      console.log(this.rowindex)
       this.rowindex.shuliang = this.input2
       this.showManualEntryDialog3 = false;
    },
    zyslsc() {},
  },
};
</script>
<style lang="less" scoped>
.plan-entry-table-container {
  margin-top: 0px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table__footer{
    height: 76px;
    font-size: 16px;
    font-weight: bold;
    background-color: #edf2f9;
    // color: #004ca7;
  }
  .el-table__footer tr,
  .el-table__footer td {
    padding: 0;
    height: 86px;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .bk-lucj-import-button {
    display: block;
    .export-button;
    width: 80px;
    background: #ffffff;
    border: none;

    &:last-child {
      margin-bottom: 0px;
    }
    &:first-child {
      margin-bottom: 0px;
    }

    > span {
      color: #004ca7;
    }
  }
  .bk-lucj-import-button {
    img {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  .manual-entry-container {
    .el-dialog__body {
      > div {
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;
        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);
          &:last-child {
            border-bottom: none;
          }
          > div {
            display: flex;
            > div {
              display: flex;
              align-items: center;
              justify-content: center;
              &:nth-child(1) {
                width: 420px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }
              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }
  }
  .bk-lucj-expot-button {
    .export-button;
    width: 156px;
    background: #fef1e8;
    border: 1px solid #f86900;
    box-sizing: border-box;
    float: right;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f86900;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/entry-results.less";
.button-group {
  cursor: pointer;
  margin-top: 50px;
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 60px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}
.plsc-button {
  height: 38px;
  font-size: 16px;
  background: #ffefef;
  border: 1px solid #fa5339;
  border-radius: 6px;
  color: #ff3819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 2px 5px 0 0;
  }
}
.cjrc-button {
  width: 140px;
  height: 28px;
  line-height: 28px;
  background: #fff6ef;
  border: 1px solid #f86900;
  border-radius: 6px;
  color: #f86900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.my-form-container {
  width: 1720px;
  height: 879px;
  margin: 20px auto 18px;
  border: 1px solid rgba(0, 76, 167, 0.8);
  border-radius: 5px;
  .my-form-item {
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label {
        width: 40%;
        height: 100%;
        padding-left: 47px;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        color: #004CA7;
        font-size: 16px;
        font-weight: bold;
        border-right: 1px solid rgba(0, 76, 167, 0.39);
        margin-left: -1px;
      }
      .my-form-item-value {
        font-size: 16px;
        color: #004CA7;
        height: 100%;
        flex: 1;
        line-height: 60px;
        padding: 0 40px;
      }
    }
  }
}
.assessment-container {
  width: 100% !important;
}

.my-form-container {
  width: 100%;
  height: auto;
  // padding: 30px 50px 30px 50px;
}
.my-form-item-value {
  font-size: 16px;
  color: #004ca7;
  height: 100%;
  flex: 1;
  line-height: 60px;
  padding-left: 38px;
  display: flex;
  align-items: center;
}
.plan-entry-table-container {
  margin-top: 0px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
.el-dialog__wrapper {
  > ::v-deep .ManualEntryDialog {
    height: 36vh;
  }
}
.el-buuton {
  ::v-deep .icon-plan-record-detail {
    background-image: url("../../../assets/assessment/icon-plan-record-detail.png")
  }
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;

            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
